<template>
	<view>
		<u-popup v-model="show" mode="bottom" width="750rpx" height="60%">
			<view class="popup">
				<view class="popup-top">
					<view class="popup-title">
						<view class="cancel" @click="cancel">取消</view>
						<view class="title">{{title}}</view>
						<view class="confirm"></view>
					</view>
					<view class="popup-search-box">
						<input class="popup-search-input" type="text" v-model="name" placeholder="请输入搜索关键词" />
						<view class="popup-search" @click="search()">搜索</view>
					</view>
				</view>
				<view class="popup-view" v-if="selectList.length>0">
					<view class="popup-view-text" v-for="(item,i) in selectList" :key="i" @click="confirm(item)">
						{{item[rangeKey]}}
					</view>
				</view>
				<view v-else class="noData">暂无数据</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "assign-waybill-popup",
		data() {
			return {
				name: '',
				list: [],
				selectList: [],
				show: false, // 弹窗显示
				title: '选择司机',
				rangeKey: 'name'
			};
		},
		methods: {
			open(title, list, rangeKey) {
				this.title = title
				this.list = list
				this.selectList = list
				this.rangeKey = rangeKey
				this.show = true;
			},
			cancel() {
				this.$emit("cancel")
				this.list = []
				this.selectList = []
				this.name = ''
				this.show = false;
			},
			confirm(item) {
				this.$emit('confirm', item)
				this.list = []
				this.selectList = []
				this.name = ''
				this.show = false;
			},
			search() {
				uni.showLoading()
				let reg = new RegExp(this.name);
				let arr = [];
				for (let i in this.list) {
					if (reg.test(JSON.stringify(this.list[i][this.rangeKey]))) {
						arr.push(this.list[i]);
					}
				}
				uni.hideLoading()
				this.selectList = arr
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		width: 100%;
		background-color: #FFFFFF;
		padding: 30rpx;
		padding-top: 220rpx;
		box-sizing: border-box;
		position: relative;

		.popup-top {
			width: 100%;
			height: 220rpx;
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			top: 0;
			left: 0;

			.popup-title {
				width: 100%;
				padding: 0 20rpx;
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;

				.cancel {
					font-size: 30rpx;
					color: #999;
					width: 80rpx;
				}

				.title {
					font-size: 38rpx;
					color: #333333;
					font-weight: 500;
				}

				.confirm {
					font-size: 30rpx;
					opacity: 0;
					color: #337DF8;
					width: 80rpx;
				}
			}

			.popup-search-box {
				width: 100%;
				padding: 20rpx;
				height: 120rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.popup-search-input {
					width: 80%;
					height: 80rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					background: #f7f8fa;
					font-size: 30rpx;
				}

				.popup-search {
					width: 20%;
					font-size: 30rpx;
					color: #333333;
					text-align: center;
					padding: 20rpx;
					box-sizing: border-box;
				}
			}
		}


		.popup-view {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.popup-view-text {
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.noData {
			width: 100%;
			padding: 20rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>
